<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-09 10:21:36
 * @LastEditors: htang
 * @LastEditTime: 2024-03-08 09:00:15
-->
<template>
  <div class="left-echarts-node">
    <div class="tip">
      <span>分区域累计报警占比</span>
      <dv-decoration2 :dur="2" />
    </div>
    <div class="ranking-list">
      <template v-for="(item, idx) in rankingList" :key="idx">
        <div class="ranking-item flex items-center">
          <span class="name">{{ item.name }}</span>
          <div class="bar">
            <div :style="{ width: item.proportion + '%' }">{{ item.value }}</div>
          </div>
          <span class="proportion">{{ item.proportion }}%</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { ref, watch, getCurrentInstance, onMounted, defineComponent, onUnmounted, nextTick } from 'vue';
import { Progress } from 'ant-design-vue';
import { alarmSummaryRegionApi } from '/@/api/alarm/index.ts';
import { getRegionList } from '/@/api/station/index';
import '@/assets/js/highcharts/highcharts.js';
import '@/assets/js/highcharts/highcharts-3d.js';
import '@/assets/js/highcharts/modules/exporting.js';
export default defineComponent({
  components: { Progress },
  setup() {
    let { proxy } = getCurrentInstance();

    // 站点列表
    let stationList = ref([]);

    let totalNumber = ref(0);

    let rankingList = ref([]);

    function init() {
      alarmSummaryRegionApi().then((res) => {
        totalNumber.value = res.reduce((acc, cur) => {
          return acc + cur.count;
        }, 0);
        rankingList.value = res
          .sort((a, b) => b.count - a.count)
          .filter((k) => {
            let name = stationList.value.find((j) => j.regionCode == k.regionCode)?.regionName;
            if (name) {
              k['proportion'] = k.count !== 0 ? parseFloat((k.count / totalNumber.value) * 100).toFixed(2) : 0;
              k['name'] = name;
              return k;
            }
          });
      });
    }

    onMounted(async () => {
      stationList.value = await getRegionList({});
      init();
    });

    return {
      rankingList,
    };
  },
});
</script>

<style lang="less" scoped>
.left-echarts-node {
  width: 100%;
  height: calc(100vh - 680px);
  // height: 240px;
  padding: 0 0 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.01) 100%);
  backdrop-filter: blur(100px);
  .tip {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-39.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    span {
      position: relative;
    }
    .dv-decoration-2 {
      position: absolute;
      bottom: 0;
      left: 11px;
      width: 95%;
      height: 5px;
    }
  }
  .ranking-list {
    height: calc(100% - 21px);
    overflow-y: scroll;
    color: #fff;
    .ranking-item {
      height: 25px;
      margin: 10px 12px;
      justify-content: space-around;

      .name {
        width: 70px;
      }
      .bar {
        height: 100%;
        margin: 0 6px;
        border-radius: 4px;

        line-height: 25px;
        flex: 1;
        div {
          border-radius: 5px;
          width: 100%;
          height: 100%;
          background-color: #ec808d;
          text-align: center;
        }
      }
      .proportion {
        width: 50px;
        margin: 0 0 0 12px;
      }
    }
  }
}
</style>
